<script>
import { mapStores } from "pinia";
import { useUserStore } from "../../stores/user";
import ReviewApi from "../../api/review";

export default {
  props: ["bookId"],
  emits: ["refresh"],
  data() {
    return {
      user: {}, //用户信息
      title: "", //评论标题
      content: "", //评论内容
    };
  },
  methods: {
    async addReview() {
      try {
        let review = {
          bookId: this.bookId,
          title: this.title,
          content: this.content,
        };
        const api = new ReviewApi();
        let res = await api.add(review);
        if (res.code === 201) {
          this.$myMessageBox(res.msg);
          this.$emit("refresh");
        }
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
  },
  mounted() {
    this.user = this.userStore.userData;
  },
  computed: {
    ...mapStores(useUserStore),
  },
};
</script>

<template>
  <div class="review-add">
    <div>
      <span>{{ user.nickname }}</span>
    </div>
    <div>
      <p>
        <label for="title">标题:</label>
        <input type="text" id="title" v-model="title" />
      </p>
      <p>
        <label for="content">内容:</label>
        <textarea id="content" cols="20" rows="5" v-model="content"></textarea>
      </p>
      <p>
        <button @click="addReview">提交</button>
      </p>
    </div>
  </div>
</template>

<style scoped>
.review-add {
  display: flex;
  justify-self: center;
  align-items: baseline;
}

.review-add div:first-of-type {
  flex: 0 1 auto;
  margin-right: 16px;
}

.review-add div:last-of-type {
  flex: 1 1 auto;
}

.review-add div:last-of-type > p {
  display: flex;
  justify-content: center;
  align-items: center;
}

input,
textarea {
  width: 90%;
}
</style>
